<template>
	<view class="pointsExchangeCenter" :style="{'padding-top':!true ? '124rpx':'10rpx'}">

		<view class="tabs" v-if="!true">
			<view class="" @click="changeTab(0) ">
				<view class="tab_name">互转个人</view>
				<view class="tab_underline">
					<view :class="{'active_color':newTabsActive==0}"></view>
				</view>
			</view>
			<view v-if="false" class="" @click="changeTab(1)">
				<view class="tab_name">互转商家</view>
				<view class="tab_underline">
					<view :class="{'active_color':newTabsActive===1}"></view>
				</view>
			</view>
		</view>
		<view class="publish_needs">
			<view class="input_list">
				<view class="" v-if="newTabsActive==1 && false">
					<view class="input_name">互转商家ID</view>
					<input type="number" placeholder="请输入被转商家ID" placeholder-class="placeholderStyle" v-model="bunid">
				</view>
				<view class="" v-if="newTabsActive==0">
					<view class="input_name">互转个人ID</view>
					<input type="number" placeholder="请输入被转个人ID" placeholder-class="placeholderStyle" v-model="userid">
				</view>
				<view class="" v-if="tabsActive==0">
					<view class="input_name">互转余额数</view>
					<input type="text" inputmode="decimal" placeholder="请输入互转余额数" placeholder-class="placeholderStyle"
						v-model="money">
				</view>
				<view class="" v-if="tabsActive==1">
					<view class="input_name">互转泌豆数</view>
					<input type="text" inputmode="decimal" placeholder="请输入互转泌豆数" placeholder-class="placeholderStyle"
						v-model="bond">
				</view>
			</view>
			<view class="btns">
				<view class="" @click="ongGiveFriends">确认互换</view>
			</view>
		</view>

		<view class="hint">
			{{tabsActive==1?`当前泌豆: ${score}`:`当前余额:${hintMoney}`}}

		</view>
		<view class="tit">明细</view>
		<view class="detailsBox">
			<view class="between oneList" v-for="(item,i) in list">
				<view>
					<view>{{item.remark}}</view>
					<view class="time">{{item.createtime}}</view>
				</view>
				<view class="score" style="color: #FC2E30;">{{item.money}}</view>
			</view>
			<view class="flex-center addressImgBox" v-if="list.length==0">
				<image src="https://wx.2024csnl.com/static/noData.png"></image>
				暂无数据~
			</view>
			<view style="text-align: center;color: #999;" v-if="noMoreData&&list.length!=0">没有更多啦~</view>
			<view style="height: 50px;"></view>
		</view>

		<pay-keyboard :show_key="show_pay_keyboard" @hideFun="hidePayKeyboard" :show_forget="true"
			@getPassword="getPayPassword"></pay-keyboard>
	</view>
</template>

<script>
	import {
		reqChange,
		reqChangeMsg,
		checkpaypwdRequest
	} from "../../../api/index.js"
	export default {
		data() {
			return {

				show_pay_keyboard: false,
				payPassword: '',
				noMoreData: false,
				list: [],
				pagenum: 1,

				newTabsActive: 0,
				money: '',
				userid: '',
				tabsActive: null,
				score: '',
				hintMoney: '',
				bond: '',
				bunid: '',
				bid: '',
				person: false, //是否是个人
			};
		},
		onLoad(opt) {
			this.person = opt.person
			this.bid = opt.bid ? opt.bid : '';
			this.tabsActive = opt.tabsActive
			this.onReqChange('GET')
			this.getReqChangeMsg()
		},
		onReachBottom() {
			this.pagenum += 1
			// console.log('触底了---',this.pagenum)
			this.getReqChangeMsg('bottom')
		},
		methods: {
			async showPayKeyboard() {
				this.show_pay_keyboard = true
			},
			hidePayKeyboard() {
				this.show_pay_keyboard = false
			},
			async getPayPassword(n) {
				console.log("用户输入的密码", n)
				this.payPassword = n.password;
				this.show_pay_keyboard = false

				const res = await checkpaypwdRequest('s=/ApiMy/checkpaypwd', {
					paypwd: this.payPassword
				})
				const {
					status,
					msg
				} = res.data
				console.log(res)
				if (status == 1) {
					await this.onReqChange('POST')
				} else {
					this.showToast(msg)
				}
			},
			// 记录
			async getReqChangeMsg(type) {
				const res = await reqChange(`s=ApiZwyRequest/accountdetail`, {
					bid: this.bid,
					type: this.tabsActive,
					pagenum: this.pagenum
				}, 'POST')

				const {
					data,
					status,
					msg
				} = res.data
				console.log(res, "res----记录", data.data)
				if (status == 1) {
					// console.log(res, "ffff",type)
					type == 'bottom' ? this.list.push(...data.data) : this.list = data.data
					this.pagenum != 1 && data.length == 0 ? this.noMoreData = true : this.noMoreData = false
				} else {
					this.showToast(msg)
				}
			},
			changeTab(type) {
				this.newTabsActive = type
				this.money = ''
				this.bond = ''
				this.bunid = ''
				this.userid = ''
			},
			async onReqChange(type) {
				let dataMsg = {
					type: this.tabsActive,
					id: this.userid,
					bid: this.bid,
					value: this.tabsActive == 1 ? this.bond : this.money,
					givetype: this.newTabsActive
				}
				const res = await reqChange(`s=ApiZwyRequest/givemoney`, dataMsg, type)
				console.log(res, "res----")
				const {
					status,
					msg,
					data,
				} = res.data
				if (status == 1) {
					if (type == 'GET') {
						this.score = data.score
						this.hintMoney = data.money
					}
					if (type == "POST") {
						this.showToast(msg)
						setTimeout(() => {
							this.onReqChange('GET')
							this.pagenum = 1
							this.getReqChangeMsg()
						}, 1000)

					}
				} else {
					this.showToast(msg)
				}
			},
			async ongGiveFriends() {
				let tit = this.tabsActive == 1 ? '请输入赠送泌豆数' : '请输入赠送余额数'
				switch (true) {
					case this.tabsActive == 1 && (this.bond <= 0 || this.bond > Number(this.score)):
						this.showToast(`泌豆须大于0,小于等于${this.score}`)
						break;
					case this.tabsActive == 0 && (this.money <= 0 || this.money > Number(this.hintMoney)):
						this.showToast(`余额须大于0,小于等于${this.hintMoney}`)
						break;
					case this.newTabsActive == 0 && this.userid == '':
						this.showToast('请输入互转人ID')
						break;
					case this.newTabsActive == 1 && this.bunid == '':
						this.showToast('请输入互转商家ID')
						break;
					default:
						//this.onReqChange('POST')
						await this.showPayKeyboard()
						break;
				}
			},
		},

	}
</script>

<style lang="scss">
	.detailsBox {
		// height: calc(100vh - 26vh);
		// overflow: auto;
		padding-bottom: 100rpx;

		.oneList {
			background: #fbfbfb;
			padding: 27rpx 30rpx;
			margin: 20rpx 20rpx 30rpx;
			border-radius: 30rpx;
			font-size: 28rpx;
		}

		.time {
			color: #666;
			font-size: 26rpx;
			margin-top: 20rpx;
		}

		.score {
			margin-top: 20rpx;
			font-size: 30rpx;
		}
	}

	.topBox {
		position: relative;
		font-size: 30rpx;
		color: #fff;

		.bgImg {
			width: 100%;
			height: 320rpx;
		}

		.topMsg {
			position: absolute;
			top: 104rpx;
			margin-left: 67rpx;
			width: 92vw;
		}

		.moneyBox {
			font-size: 54rpx;
			margin-top: 32rpx;
			font-weight: bold;

			text {
				font-size: 30rpx;
				margin-right: 5rpx;
			}


		}
	}

	.tit {
		font-size: 30rpx;
		color: #333;
		margin: 32rpx 30rpx 28rpx;
	}

	.hint {
		color: #41644A;
		font-size: 34rpx;
		padding: 30rpx;
		font-weight: bold;
	}

	.publish_needs {
		.input_list {
			background-color: #fff;
			margin-bottom: 52upx;

			>view {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 32upx 40upx 32upx 30upx;
				box-sizing: border-box;
				border-bottom: 1upx solid #F7F7F7;

				.input_name {
					font-size: 30upx;
				}

				input {
					font-size: 26upx;
					flex: 1;
					margin-left: 20upx;
					text-align: right;
				}

				.placeholderStyle {
					color: #B3B3B3;
				}
			}
		}

		.btns {
			padding: 0 20upx;
			box-sizing: border-box;

			>view {
				width: 100%;
				height: 86upx;
				border-radius: 14upx;
				line-height: 86upx;
				text-align: center;
				color: #fff;
				background-color: #41644A;
				font-size: 32upx;
				margin-bottom: 40upx;
			}
		}
	}

	.friends-info {
		margin: 20rpx 0;
		background-color: #FFF;
		line-height: 93rpx;
		font-size: 29rpx;

		.info-item {
			margin: 0 30rpx;

			.info-label {
				min-width: 200rpx;
			}

			.info-input {
				flex: 1;
				font-size: 27rpx;
				text-align: right;
			}
		}
	}

	.btn {
		margin: 98rpx 20rpx;
		background-color: #41644A;
		color: #FFF;
		line-height: 88rpx;
		border-radius: 20rpx;
	}

	.addressImgBox {
		flex-direction: column;
		color: #999;
		padding-top: 20%;

		image {
			width: 400rpx;
			height: 400rpx;
		}
	}

	.pointsExchangeCenter {

		.tabs {
			height: 124upx;
			width: 100%;
			position: fixed;
			//  #ifdef APP-PLUS
			top: 0; //新增
			// #endif 
			// #ifdef H5
			top: 90rpx;
			// #endif 
			left: 0;
			z-index: 99;
			padding: 0 120upx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #f7f7f7;

			>view {
				.tab_name {
					font-size: 34upx;
					color: #1B1B1B;
					margin-bottom: 20upx;
				}

				.tab_underline {
					display: flex;
					justify-content: center;

					>view {
						width: 52upx;
						height: 10upx;
						border-radius: 4upx;
					}

					.active_color {
						background-color: #41644A;
					}
				}
			}
		}
	}
</style>